<template>
    <div class="livepreview">
        <!-- 默认图文样式 -->
        <section v-show="!datas.imageList || !datas.imageList[0]" class="defaultcommodity">
            <div class="defaultcommodityList">
                <div class="contentlist" v-for="index in 4" :key="index">
                    <div class="contentlisttop">
                        <div class="contentlisttopleft">
                            <img src="../../../assets/images/xueke.png" alt="">
                            <div class="livestatus">
                                <img src="../../../assets/images/playgreen.png" alt="">
                                <span>直播中</span>
                            </div>
                        </div>
                        <div class="contentlisttopright">
                            <p>3天计算高手训练营</p>
                            <span>每天7分钟，口算笔算快又准，计算不丢分</span>
                        </div>
                    </div>
                    <div class="contentlistbot">
                        <p>2月2-24日 周一至周五 9:00</p>
                        <div class="botbtnlist">
                            <div class="studybtn">去学习</div>
                            <div class="livebtn">直播预告</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 默认图文样式 -->
        <section v-show="datas.imageList || datas.imageList[0]" class="defaultcommodity">
            <div class="defaultcommodityList">
                <div class="contentlist" v-for="(item, index) in datas.imageList" :key="index">
                    <div class="contentlisttop">
                        <div class="contentlisttopleft">
                            <img v-if="!item.src" src="../../../assets/images/imgs.png" />
                            <img v-else draggable="false" :src="item.src" alt="" />
                            <div class="livestatus">
                                <img src="../../../assets/images/playgreen.png" alt="">
                                <span>直播中</span>
                            </div>
                        </div>
                        <div class="contentlisttopright">
                            <p>{{ item.text || '这里是标题' }}</p>
                            <span>{{ item.desc || '这里是描述，不要超过两行' }}</span>
                        </div>
                    </div>
                    <div class="contentlistbot">
                        <p>{{ item.flag || '这是直播预告时间'}}</p>
                        <div class="botbtnlist">
                            <div class="studybtn">{{ item.studyBtn || '去学习'}}</div>
                            <div class="livebtn">{{ item.liveBtn || '直播预告' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 组件操作 -->
        <slot name="deles" />
    </div>
</template>

<script>
export default {
    name: 'Livepreview',
    props: {
        datas: Object,
    },
}
</script>

<style lang="scss" scoped>
.livepreview{
    position: relative;
    .defaultcommodity{
        box-sizing: border-box;
        .contentlist{
            width: 86%;
            padding: 12px;
            // height: 128px;
            background: #FFFFFF;
            box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
            border-radius: 8px;
            margin: 15px auto;
            .contentlisttop{
                display: flex;
                // align-items: center;
                .contentlisttopleft{
                    margin-right: 10px;
                    position: relative;
                    img{
                        width: 72px;
                        height: 72px;
                        border-radius: 8px;
                    }
                    .livestatus{
                        width: 62px;
                        height: 20px;
                        background: rgba(0,0,0,0.5);
                        display: flex;
                        align-items: center;
                        position: absolute;
                        left: 5px;
                        top: 5px;
                        border-radius: 20px;
                        img{
                            width: 18px;
                            height: 18px;
                            display: block;
                            // margin: 0 5px;
                            margin-right: 5px;
                        }
                        span{
                            font-size: 10px;
                            font-weight: 800;
                            color: #FFFFFF;
                        }
                    }
                }
                .contentlisttopright{
                    p{
                        font-size: 16px;
                        font-weight: 500;
                        color: #333333;
                        line-height: 0;
                    }
                    span{
                        font-size: 14px;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }
            .contentlistbot{
                display: flex;
                justify-content: space-between;
                align-items: center;
                p{
                    width: 165px;
                    height: 21px;
                    background: #FFF7E6;
                    border-radius: 4px;
                    line-height: 21px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: 500;
                    color: #DA9303;
                }
                .botbtnlist{
                    display: flex;
                    align-items: center;
                    .studybtn{
                        width: 72px;
                        height: 26px;
                        line-height: 26px;
                        text-align: center;
                        border: 1px solid #29C07B;
                        border-radius: 60px;
                        font-size: 12px;
                        font-weight: 600;
                        color: #29C07B;
                        margin-right: 5px;
                    }
                    .livebtn{
                        width: 72px;
                        height: 30px;
                        line-height: 30px;
                        color: #fff;
                        font-size: 12px;
                        font-weight: 600;
                        background: #FFAA00;
                        border-radius: 60px;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>